<template>
  <el-row
      style="height: 1080px;
      width: 1920px"
  >
    <Map
        :massmark="massmark"
        :map-info="mapSetting"
        @getWorkPhoneNum="getWorkPhoneNum"
    >
      <!----------------------------------------标题------------------------------>
      <div
          class="ornament1 position2"
      ></div>
      <div
          class="con1 position1"
      >
        <span
            style="color:#899FAC;
            font-size: 35px;
            margin: 0;
            position:relative;
            top:28px"
        >黑广播监测大数据中心平台</span>
      </div>
      <!------------------------------------- 警情区 ------------------------------>
      <dv-border-box-12
          style="text-align: center;"
          class="con2-part2 position3-part2"
      >
        <span
            class="RankTitle"
        >
          <a
              @click="openMobileDialog"
          >
            <span
                style="color: #ffffff;
                font-size: 18px;
                font-style: normal"
            >
              手机打卡排名
            </span>
          </a>
        </span>
        <scrollRankingBoard
            :info="mobileUseRank.slice(0,10)"
            style="width: 85%;
            height: 80%;
            margin-left: 1vw;
            margin-top: 1vw"
            :row-num="5"
        />
      </dv-border-box-12>

      <dv-border-box-12
          class="con2 position3"
      >
        <!----- 月统计 --- -->
        <chartMonth
            :current-data="monthData"
            style="width: 100%;
            height: 50%"
        />
        <!----- 年统计 ----->
        <chartYear
            :current-data="yearData"
            style="width: 100%;
            height: 50%"
        />
      </dv-border-box-12>
      <!------------------------------------- 计数器 ------------------------------>
      <div
          class="con3 position4"
      >
        <!----- 设备总量 --- -->
        <div
            class="counter"
        >
          <span
              class="font3"
              style="color:#899FAC"
          >设备总量</span>
          <Digital
              :number="amountPhone"
              :to-fixed="0"
              :font-size="25"
          />
        </div>
        <!----- 在线设备 --- -->
        <div
            class="ornament9"
        ></div>
        <div
            class="counter"
        >
          <span
              class="font3"
              style="color:#899FAC"
          >在线设备</span>
          <Digital
              :number="workingPhone"
              :to-fixed="0"
              :font-size="25"
          />
        </div>
        <!----- 统计天数 --- -->
        <div
            class="ornament2"
        ></div>
        <div
            class="counter"
        >
          <span
              class="font3"
              style="color:#899FAC"
          >统计天数</span>
          <Digital
              :number="countDay"
              :to-fixed="0"
              :font-size="25"
          />
        </div>
        <!----- 黑广播数 --- -->
        <div
            class="ornament3"
        ></div>
        <div
            class="counter"
        >
          <span
              class="font3"
              style="color:#899FAC"
          >黑广播数</span>
          <Digital
              :number="blackBoard"
              :to-fixed="0"
              :font-size="25"
          />
        </div>
      </div>
      <!------------------------------------- 大数据 ------------------------------>
      <dv-border-box-12
          class="con4 position5"
      >
        <!----- 时间统计 --- -->
        <chartTime
            :current-data="timeData"
            style="width: 95%;height: 50%"
        />
        <!----- 分类统计 --- -->
        <chartCategory
            :current-data="categoryData"
            style="width: 95%;
            height: 50%"
        />
      </dv-border-box-12>
      <dv-border-box-12
          style="text-align: center"
          class="con4-part2 position5-part2"
      >
        <span
            class="RankTitle"
        >
          <a
              @click="openBlackBroadDialog"
          >
            <span
                style="color: #ffffff;
                font-size: 18px;
                font-style: normal"
            >
              黑广播地区排名
            </span>
          </a>
        </span>
        <scrollRankingBoard
            :info="blackRegionRank.slice(0,10)"
            style="width: 85%;
            height: 80%;
            margin-left: 1vw;
            margin-top: 1vw"
            :row-num="5"
        />
      </dv-border-box-12>
      <!------------------------------------- 信息展示 ---------------------------->
      <div
          class="con5 position6"
      >
        <!----- 轮播表 --- -->
        <scrollBoard
            style="height: 60%;width: 80%"
            :row-num="5"
            :column-width="[150,60,50,300]"
            :data="scrollData"
            class="scroll"
        />
        <!--          <dv-scroll-board :config="config"/>-->
        <div
            class="ornament5"
        ></div>
      </div>
      <!------------------------------------- 导航区 ------------------------------>
      <div
          class="con6 position7"
      >
        <div
            class="button"
        >
          <el-button
              type="primary"
              style="width: 100%;
              font-size: 18px"
              @click="gotoManage"
          >控制中心
          </el-button>
        </div>
        <div
            class="ornament4"
        ></div>
      </div>
      <!------------------------------------- 热力地图 --------------------------- -->
      <div
          class="con7 position8"
      >
        <heatmap
            @getScrollData="getScrollData"
            @getBroadcastData="getBroadcastData"
            :map-info="heatSeting"
            id="container2"
        ></heatmap>
      </div>

    </Map>

    <Dialog
        :visiable="phoneRankVisiable"
        @close="phoneRankVisiable=false"
        custom-class="phoneRankDialog"
        :info="{width:'45vw'}"
    >
      <span
          slot="header"
          style="
          color:#ffffff;
          font-size: 18px"
      >手机打卡排名</span>
      <el-table
          :data="mobileUseRankPage"
          border
          :cell-style="cellStyle"
          :lock-scroll="true"
          height="65vh"
      >

        <el-table-column
            label="排名"
            align="center"
            width="120"
        >
          <template slot-scope="scope">
            {{ (page - 1) * 10 + scope.$index + 1 }}
          </template>
        </el-table-column>

        <el-table-column
            label="手机名"
            align="center"
        >
          <template slot-scope="scope"
          >
            {{ scope.row.name }}
          </template>
        </el-table-column>

        <el-table-column
            label="打卡次数"
            align="center"
        >
          <template slot-scope="scope"
          >
            {{ scope.row.value }}
          </template>
        </el-table-column>

      </el-table>
      <Pagination
          :layout="'total, prev, pager, next, jumper'"
          :total="mobileUseRank.length"
          :background="true"
          :resetFlag="resetFlag"
          @currentChange="currentChange"
      />
    </Dialog>


    <Dialog
        :visiable="blackRegionVisiable"
        @close="blackRegionVisiable=false"
        custom-class="phoneRankDialog"
        :info="{width:'45vw'}"
    >
      <span
          slot="header"
          style="
          color:#ffffff;
          font-size: 20px"
      >黑广播地区排名</span>
      <el-table
          :data="blackRegionRankPage"
          border
          :cell-style="cellStyle"
          :lock-scroll="true"
          height="65vh"
      >

        <el-table-column
            label="排名"
            align="center"
            type="index"
            width="120"
        >
        </el-table-column>

        <el-table-column
            label="地区名"
            align="center"
        >
          <template slot-scope="scope"
          >
            {{ scope.row.name }}
          </template>
        </el-table-column>

        <el-table-column
            label="发现黑广播数"
            align="center"
        >
          <template slot-scope="scope"
          >
            {{ scope.row.value }}
          </template>
        </el-table-column>
      </el-table>

      <Pagination
          :background="true"
          :total="20"
          :resetFlag="resetFlag"
          @currentChange="currentChange"
      />
    </Dialog>
  </el-row>
</template>

<script>
// --------- AMap ----------------
import {mapSetting} from "../../components/AMap/map_setting";
// -------- 自定义组件 ----------------
import Map from "./map"
import heatmap from "./heatmap";
// ------------ echart -----------------
import chartYear from "./chart/chartYear";
import chartMonth from "./chart/chartMonth";
import chartCategory from "./chart/chartCategory";
import chartTime from "./chart/chartTime";
// ------------- ws ---------------------
import wsMixin from "../../components/websocket/wsMixin";
// ------------ datav -------------------
import Digital from "../../components/datav/Digital";
import scrollBoard from "../../components/datav/scrollBoard";
import scrollRankingBoard from "../../components/datav/scrollRankingBoard";
// ------------- element-ui ---------------
import Dialog from "../../components/element-ui/dialog";
import Pagination from "../../components/element-ui/Pagination";

export default {
  components: {
    // Space,
    Map,
    chartYear,
    chartMonth,
    chartCategory,
    chartTime,
    Digital,
    heatmap,
    scrollBoard,
    scrollRankingBoard,
    Dialog,
    Pagination
  },
  mixins: [wsMixin],
  computed: {
    /**
     * */
    mapSetting: function () {
      return mapSetting("index")
    },
    /**
     *
     * */
    heatSeting: function () {
      return mapSetting("indexHeat")
    },
    mobileUseRankPage: function () {
      let offset = (this.page - 1) * this.limit;
      return (offset + this.limit >= this.mobileUseRank.length) ? this.mobileUseRank.slice(offset, this.mobileUseRank.length) : this.mobileUseRank.slice(offset, offset + this.limit);
    },
    blackRegionRankPage: function () {
      let offset = (this.page - 1) * this.limit;
      return (offset + this.limit >= this.blackRegionRank.length) ? this.blackRegionRank.slice(offset, this.blackRegionRank.length) : this.blackRegionRank.slice(offset, offset + this.limit);
    },
  },
  data() {
    return {
      yearData: [],
      monthData: [],
      timeData: [],
      categoryData: [],
      workingPhone: 0,
      amountPhone: 1,
      blackBoard: 1,
      countDay: 1,
      scrollData: [],
      massmark: [],
      mobileUseRank: [],
      blackRegionRank: [],
      //  ----------- dialog -----------
      phoneRankVisiable: false,
      blackRegionVisiable: false,
      //  -------------table --------------
      cellStyle: {
        backgroundColor: "rgb(3, 52, 71)",
        color: "#ffffff",
      },
      limit: 10,
      page: 1,
      resetFlag:false,
    }
  },
  methods: {
    /**
     * 去管理页面
     */
    gotoManage: function () {
      // this.$router.push({name: "bigData"});
      location.replace("#/bigData");
      location.reload();
    },
    getWorkPhoneNum: function (val) {
      this.workingPhone = val
    },
    getScrollData: function (val) {
      this.scrollData = val
    },
    getBroadcastData: function (val) {
      this.massmark = val;
    },
    // ------------ table -------------
    // check: function (val) {
    // },
    // ------------ ws --------------
    /**
     * 收到websocket消息
     * @param e
     */
    readMessage(e) {
      let message = JSON.parse(e.data);
      this.yearData = message.chart_year_month.y_data;
      this.monthData = message.chart_year_month.m_data;
      this.timeData = message.time_count.time_list;
      this.categoryData = message.category.category;
      this.amountPhone = message.counter.MobileNum;
      this.blackBoard = message.counter.blackbrocast;
      this.countDay = message.counter.date_diff;
      let mobileUseRank = message.mobileSummary;
      let blackRegionRank = message.regionSummary;
      let mobileUseRankinfo = [];
      let blackRegionRankinfo = [];
      for (let i = 0; i < mobileUseRank.length; i++) {
        let info = {};
        info["name"] = mobileUseRank[i]["mobile__name"];
        info["value"] = mobileUseRank[i]["count"];
        mobileUseRankinfo.push(info);
      }
      for (let i = 0; i < blackRegionRank.length; i++) {
        let info = {};
        info["name"] = blackRegionRank[i]["district"];
        info["value"] = blackRegionRank[i]["count"];
        blackRegionRankinfo.push(info);
      }
      this.mobileUseRank = mobileUseRankinfo;
      this.blackRegionRank = blackRegionRankinfo;
    },
    currentChange: function (val) {
      this.page = val.currentPage;
      this.limit = val.pageSize
    },
    openMobileDialog: function () {
      this.phoneRankVisiable = true;
      this.page = 1;
      this.resetFlag = !this.resetFlag;
    },
    openBlackBroadDialog: function () {
      this.blackRegionVisiable = true;
      this.page = 1;
      this.resetFlag = !this.resetFlag;
    }
  },
  mounted() {
    this.socketInit(this.$wsUrl, this.readMessage);
  },
  beforeDestroy() {
    this.sendToClose()

  },
}
</script>

<style scoped>
.RankTitle {
  position: relative;
  top: 1vh;
  color: #ffffff;
  font-size: 15px;
  padding: 1vh
}

.detailButton {
  color: #ffffff;
  float: right;
  font-size: 15px;
  position: relative;
  top: 1vh;
  right: 2vw;
}
</style>
<style>
.phoneRankDialog {
  background-color: rgba(3, 52, 71, 0.8)
}

.el-pagination span {
  color: #ffffff
}
.el-button span{
  font-size: 18px;
}

</style>